<template>
  <div class="heard-textarea">
    <t-textarea :maxlength="500" placeholder="说两句吧" v-model="parmas.content" :autosize="{ minRows: 5 }" />
    <div class="textarea-bottom">
      <span class="bottom-text">还可输入{{ 500 - parmas.content.length }}字</span>
      <!-- <div
          class="textarea-buttom"
          :style="{ background: store.styleInfo.themeColor, color: '#fff', fontSize: store.styleInfo.fontSize }"
        >
          发表评论
        </div> -->
      <div
        @click="setComment"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: store.styleInfo.mintitleSize,
          color: '#fff',
        }"
        class="left-btn flex-c-c-c"
      >
        <div class="btn-img">
          <buttonIcon />
        </div>

        <span>发表评论</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import buttonIcon from '@/components/title/buttonIcon.vue';
import { addComment } from '@/api/comment/comment';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref, computed, reactive } from 'vue';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const parmas = reactive({
  id: 0,
  content: '',
  showpieceId: 0,
  projectId: String(localStorage.getItem('projectId')),
});
const loading = ref(false);
const props = defineProps({
  showpieceId: {
    type: Number,
  },
});
const emit = defineEmits(['commentSuccess']);

const setComment = async () => {
  try {
    if (loading.value) {
      return;
    }
    if (!parmas.content) {
      MessagePlugin.error('请填写留言内容');
      return;
    }
    loading.value = true;
    parmas.showpieceId = props.showpieceId;
    let { statusCode } = await addComment(parmas);
    if (statusCode == 200) {
      MessagePlugin.success('评论成功');
      parmas.content = '';
      emit('commentSuccess');
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.heard-textarea {
  margin-top: 50px;
}
.textarea-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-top: 28px;
}
.bottom-text {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.left-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 180px;
  height: 56px;
  margin-top: 32px;
  span {
    position: relative;
    z-index: 99;
  }
}
.btn-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textarea-buttom {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 48px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
}
</style>
